/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */
import ProLayout, { DefaultFooter } from '@ant-design/pro-layout'
import React, { useEffect } from 'react'
import Link from 'umi/link'
import { connect } from 'dva'
// import { Result, Button } from 'antd';
import { formatMessage } from 'umi-plugin-react/locale'
// import Authorized from '@/utils/Authorized'
import RightContent from '@/components/GlobalHeader/RightContent'
// import { getAuthorityFromRouter } from '@/utils/utils';
import logo from '../assets/logo.svg'
import defaultSettings from '../../config/defaultSettings'

// const noMatch = (
//   <Result
//     status="403"
//     title="403"
//     subTitle="Sorry, you are not authorized to access this page."
//     extra={
//       <Button type="primary">
//         <Link to="/login">Go Login</Link>
//       </Button>
//     }
//   />
// );

/**
 * use Authorized check all menu item
 */
const menuDataRender = menuList => menuList.map(item => {
  if (item.status === '0001') {
    return {
      path: item.path,
      name: item.name,
      icon: item.icon,
      children: item.children ? menuDataRender(item.children) : [],
    }
  }
  return null
}).filter(item => item || false)

// const defaultFooterDom = <DefaultFooter copyright={defaultSettings.copyright} links={[]} />
const defaultFooterDom = <div style={{ textAlign: 'center', paddingTop: 48, paddingBottom: 24 }} dangerouslySetInnerHTML={{ __html: defaultSettings.copyright }}></div>

const footerRender = () => defaultFooterDom

const BasicLayout = props => {
  const {
    dispatch,
    // children,
    settings,
    menu,
    location,
    // location = {
    //   pathname: '/',
    // },
  } = props
  /**
   * constructor
   */

  useEffect(() => {
    if (dispatch) {
      // dispatch({
      //   type: 'user/fetchCurrent',
      // });
      // dispatch({
      //   type: 'settings/getSetting',
      // });
    }
  }, [])

  // const userMenuData = menu.menuData

  const { pathname } = location

  if (pathname === '/' || pathname === '/eam' || pathname === '/eam/') {
    // root域 跳menu第一项
    dispatch({
      type: 'menu/jumpLink',
    })
    return (<div></div>)
  }


  const handleMenuCollapse = payload => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload,
      })
    }
  } // get children authority

  // const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || {
  //   authority: undefined,
  // };
  return (
    <ProLayout
      logo={logo}
      onCollapse={handleMenuCollapse}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl) {
          return defaultDom
        }

        return <Link to={menuItemProps.path} onClick={() => {
          const clearPaths = [
            {
              path: '/property/update',
              type: 'property/updateState',
              payload: { currentItem: {} },
            },
            {
              path: '/property/repairupdate',
              type: 'propRepair/updateState',
              payload: { currentItem: {} },
            },
            {
              path: '/property/scrapupdate',
              type: 'propScrap/updateState',
              payload: { currentItem: {} },
            },
            {
              path: '/property/checkupdate',
              type: 'propCheck/updateState',
              payload: { currentItem: {} },
            },
          ]
          const menuObj = clearPaths.find(item => item.path === menuItemProps.path)

          if (menuObj) {
            dispatch({
              type: menuObj.type,
              payload: menuObj.payload,
            })
          }
        }}>{defaultDom}</Link>
      }}
      breadcrumbRender={(routers = []) => [
        {
          path: '/',
          breadcrumbName: 'EAM',
        },
        ...routers,
      ]}
      itemRender={(route, params, routes, paths) => {
        const first = routes.indexOf(route) === 0
        return first ? (
          <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
        ) : (
            <span>{route.breadcrumbName}</span>
          )
      }}
      footerRender={footerRender}
      menuDataRender={() =>
        menuDataRender(menu.menuData)
      }
      formatMessage={formatMessage}
      rightContentRender={rightProps => <RightContent {...rightProps} />}
      {...props}
      {...settings}
    >
      {/* <Authorized authority={authorized.authority} noMatch={noMatch}>
        {children}
      </Authorized> */}
    </ProLayout>
  )
}

export default connect(({ global, settings, menu }) => ({
  collapsed: global.collapsed,
  settings,
  menu,
}))(BasicLayout)
